<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>audio</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/xiaolai.css">
    <style>


      .view{ 
        width: 100%;
        height: 100%;
        font-family:'Xiaolai SC';
        /* background-color: rgba(255, 255, 255, 0.01); */
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 16px;
      }

      .view:hover{
        background-color: rgba(255, 255, 255, 0.01)
      }

     


    </style>
  </head>
  <body>
    <div class="view">
      <canvas ></canvas>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module" async >
    import { debounce } from '../common/utils/utils.js'
    import { initSource} from '../common/utils/audio.js'
    import IconSvg from '../components/IconSvg/IconSvg.js'
    customElements.define('icon-svg', IconSvg);

    let data;
    const info = {
      WIDTH: '',
      HEIGHT: '',
      interval: 1.5,
      pillarWidth: 3,

    }
    let { source, audioCtx } = await initSource();
    let analyser = audioCtx.createAnalyser(); 
    source.connect(analyser)
    analyser.fftSize =  512; //2048
    analyser.maxDecibels = 100;
    analyser.smoothingTimeConstant = 0.85;
    let bufferLength = analyser.frequencyBinCount;
    let dataArray = new Uint8Array(bufferLength);
    const view = document.querySelector('.view');
    const canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');


    const canvasSize = () => {
      const WIDTH = view.clientWidth;
      const HEIGHT = view.clientHeight;
      canvas.width = WIDTH;
      canvas.height = HEIGHT;
      info.WIDTH = WIDTH;
      info.HEIGHT = HEIGHT;
    }
    canvasSize();

    const drawRoundedRect = (x,y, width, height, radius) => {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.arcTo(x + width, y, x + width, y + height, radius);
      ctx.arcTo(x + width, y + height, x, y + height, radius);
      ctx.arcTo(x, y + height, x, y, radius);
      ctx.arcTo(x, y, x + width, y, radius);
      ctx.closePath();
      // ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
      // ctx.stroke();
      ctx.fill();
    }

    const draw = () => {
      requestAnimationFrame(draw);
      analyser.getByteFrequencyData(dataArray);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let centerX = canvas.width / 2;
      let centerY = canvas.height;
      let newDataArray = dataArray.filter((item,index) => index % 2 === 0 ).slice(0, -12);
      for(let i = 0; i < newDataArray.length; i++){ 
        let itemHeight =  newDataArray[i] > 15 ? newDataArray[i] / 2 : newDataArray[i];
        let x = centerX + i * info.pillarWidth + i * info.interval + info.interval / 2;
        // let y = ;

        for(let j = 0; j < itemHeight; j++){
          let _y = centerY - (j + 1) * info.pillarWidth - (j * 0.5);
          drawRoundedRect(x, _y, info.pillarWidth, info.pillarWidth, 1)
        }

        if(itemHeight <= 0){
          let _y = centerY - info.pillarWidth;
          drawRoundedRect(x, _y, info.pillarWidth, info.pillarWidth, 1)
        }
      }

      for(let i = 0; i < newDataArray.length; i++){
        let itemHeight =  newDataArray[i] > 15 ? newDataArray[i] / 2 : newDataArray[i];
        let x = centerX - (i * info.pillarWidth + i * info.interval + info.pillarWidth + info.interval / 2);

        for(let j = 0; j < itemHeight; j++){
          let _y = centerY - (j + 1) * info.pillarWidth - (j * 0.5);
          drawRoundedRect(x, _y, info.pillarWidth, info.pillarWidth, 1)
        }

        if(itemHeight <= 0){
          let _y = centerY - info.pillarWidth;
          drawRoundedRect(x, _y, info.pillarWidth, info.pillarWidth, 1)
        }
      }



      let gradient = ctx.createLinearGradient(0, 0, 0, info.HEIGHT);
      gradient.addColorStop(0, '#764ba2');
      gradient.addColorStop(0.5, '#6e65c6');
      gradient.addColorStop(1, '#667eea');
      ctx.fillStyle = gradient;
      ctx.fill();
    }

    draw();

    window.addEventListener("resize", debounce(canvasSize, 1000));




    window.getData = ()=>data;


  </script>
</html>
